<template>
  <BasicCard 
    title="Energy_LSTM-3D"
    v-loading="isLoading"
    element-loading-text="正在加载中..."
    element-loading-background="rgba(0, 0, 0, 0.15)"
  >
    <BasicCharts :option="option" />
  </BasicCard>
</template>

<script setup lang="ts">
import { ref, onMounted, watchEffect, reactive } from "vue";
import { storeToRefs } from "pinia";
// store
import useDataScreen from "@/store/dataScreen";
import "echarts-gl";

const dataScreenStore = useDataScreen();
// 解构
const { td3Map: map } = storeToRefs(dataScreenStore);

// X - 轮次
const rounds = ref<string[]>([]);
// Y - 设备数量
const count = ["20", "40", "60", "80", "100"];
// 对应map映射
const mapKeys = [
  "energy20_LSTM",
  "energy40_LSTM",
  "energy60_LSTM",
  "energy80_LSTM",
  "energy100_LSTM",
];
// Z - 二维数组
const dataTA = reactive([]);

let option = reactive({
  tooltip: {
    show: true
  },
  visualMap: {
    max: 1,
    inRange: {
      color: [
        '#313695',
        '#4575b4',
        '#74add1',
        '#abd9e9',
        '#e0f3f8',
        '#ffffbf',
        '#fee090',
        '#fdae61',
        '#f46d43',
        '#d73027',
        '#a50026'
      ]
    }
  },
  xAxis3D: {
    type: 'category',
    data: rounds.value,
    name: 'X-轮次',
    nameTextStyle: {
        color: '#fff'
    },
    axisLine: {
        lineStyle: {
            color: '#fff',  //坐标轴的颜色
        },
    },
  },
  yAxis3D: {
    type: 'category',
    data: count,
    name: 'Y-设备台数',
    width: 100,
    nameTextStyle: {
      color: '#fff'
    },
    axisLine: {
      lineStyle: {
        color: '#fff',  //坐标轴的颜色
      },
    },
  },
  zAxis3D: {
    type: 'value',
    nameTextStyle: {
        color: '#fff'
    },
    axisLine: {
        lineStyle: {
            color: '#fff',  //坐标轴的颜色
        },
    },
  },
  grid3D: {
    boxWidth: 200,
    boxDepth: 80,
    viewControl: {
      // projection: 'orthographic'
    },
    light: {
      main: {
        intensity: 1.2,
        shadow: true
      },
      ambient: {
        intensity: 0.3
      }
    }
  },
  series: [
    {
      type: 'bar3D',
      data: dataTA.map(function(item) {
        return {
          value: [item[1], item[0], item[2]]
        };
      }),
      shading: 'lambert',
      label: {
        fontSize: 16,
        borderWidth: 1
      },
      itemStyle: {
        opacity: 0.6
      },
      emphasis: {
        label: {
          fontSize: 20,
          color: '#900'
        },
        itemStyle: {
          color: '#900'
        }
      }
    }
  ]
}); 



const initData = () => {
  // console.log("map.value", map.value);
  // const len = map.value.get("energy10_NoLSTM").length; // 1000
  const len = 200;

  for(let i = 1; i <= len; i++) {
    rounds.value.push(i.toString());
  }

  for(let i = 0; i < mapKeys.length; i++) {
    // 二位数组最外层
    const getKey = mapKeys[i];
    const targetArr = map.value.get(getKey);

    for(let j = 0; j < len; j++) {
      // (y, x, z)
      // temp.push([i, j, targetArr[j]]);
      // dataTA.push(temp);

      dataTA.push([i, j, targetArr[j]]);
    }
  }
  // console.log('dataTA', dataTA)
  option.series[0].data = dataTA.map((item) => {
    return {
      value: [item[1], item[0], item[2]]
    };
  })
};

let isLoading = ref(true);
onMounted(() => {
  setTimeout(() => {
    initData();
    isLoading.value = false;
  }, 5000);
});
</script>

<style scoped lang="scss"></style>
